<template>
  <view ref="table" class="table_report">
    <view v-if="addBtn(itemTab)" ref="addBtnRef" class="add">
      <view v-for="(item,index) in itemTab.buttons" :key="index">
        <button v-if="item.buttonCode===1" :key="index" class="addBtn" type="primary" size="mini" @click="addFileRouter(item)">{{ item.buttonName }}</button>
      </view>
    </view>
    <u-table class="u-table">
      <u-tr ref="tableTh" class="u-tr">
        <u-th v-for="(item,index) in headData" :key="index" class="u-th">{{ item.title }}</u-th>
      </u-tr>
      <view :style="{height: height, overflow: 'auto'}">
        <Hr-Pull-Load
          ref="hrPullLoad"
          :height="-1"
          :bottom-tips="bottomTips"
          @loadMore="loadMore"
          @refresh="refresh"
        >
          <u-tr v-for="(item,index) in tableData" :key="index" class="u-tr" @click.native="gotoRouter(item)">
            <u-td v-for="(itemC, indexC) in col" :key="indexC" class="u-td">{{ item[itemC] }}</u-td>
          </u-tr>
        </Hr-Pull-Load>

      </view>

    </u-table>
    <view class="loading">
      <u-mask :show="loading">
        <u-loading size="100" mode="flower" :show="loading" />
      </u-mask>
    </view>
  </view>
</template>

<script>
import { queryHeaderByTableId, queryBodyByProduce } from '@/api/formview';
// import { chooseFile } from '@/utils/files.js';
import { Message } from '@/utils/utils';
export default {
  name: 'TableReport',

  props: {
    tableId: {
      type: Number,
      default: 0
    },
    itemTab: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      headData: [],
      col: [],
      tableData: [],
      height: '300px',
      bottomTips: '',
      filterList: [],
      page: {
        pageIndex: 0,
        pageSize: 100,
        pageType: 1
      },
      total: 0,
      loading: false
    };
  },
  watch: {
    tableId: {
      async handler(v) {
        this.getFilterList();
        await this.getTableHead(v);
        this.getTableDataHeight();
        this.getTableData();
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getFilterList() {
      const { CENTERPRISECODE1, CPROGRAMNAME } = this.$route.query;
      this.filterList = [
        { col: 'CENTERPRISECODE1', value: CENTERPRISECODE1, symbol: 'eq' },
        { col: 'CPROGRAMNAME', value: CPROGRAMNAME, symbol: 'eq' }
      ];
    },
    async getTableHead(tableId) {
      const { data, success, message } = await queryHeaderByTableId({ tableId });
      if (success) {
        const filterData = data.filter(i => i.isMobileDisplay);
        filterData.sort((a, b) => a.orderId - b.orderId);
        this.col = [];
        filterData.forEach(item => {
          this.col.push(item.dataIndex);
        });
        this.headData = filterData;
      } else {
        this.col = [];
        this.headData = [];
        Message(message);
      }
    },
    async getTableData() {
      this.loading = true;
      const obj = {
        filterList: this.filterList,
        tableId: this.tableId,
        ...this.page
      };
      const { data, success, message, total } = await queryBodyByProduce(obj);
      if (success) {
        this.page.pageIndex ? this.tableData = this.tableData.concat(data) : this.tableData = data;
        this.total = total;
      } else {
        this.tableData = [];
        this.total = 0;
        Message(message);
      }
      this.loading = false;
    },
    getTableDataHeight() {
      this.$nextTick(() => {
        this.height = this.$refs.table.$el.offsetHeight - this.$refs.tableTh.$el.offsetHeight - (this.$refs.addBtnRef && this.$refs.addBtnRef.$el.offsetHeight || 0) + 'px';
      });
    },
    gotoRouter(item) {
      console.log(item);
      console.log(this.headData);
      const { FILEID } = item;
      const listInfo = [];
      this.headData.forEach(v => {
        listInfo.push({
          label: v.title,
          value: item[v.dataIndex]
        });
      });
      const param = {
        path: '/projectInfo',
        query: {
          listInfo: JSON.stringify(listInfo),
          FILEID
        }
      };
      this.$router.push(param);
    },
    async refresh() {
      this.page.pageIndex = 0;
      await this.getTableData();
      this.$refs.hrPullLoad.reSet();
    },
    async loadMore() {
      if (((this.page.pageIndex + 1) * this.page.pageSize) >= this.total) {
        this.bottomTips = 'nomore';
      } else {
        this.bottomTips = 'loading';
        this.page.pageIndex++;
        await this.getTableData();
        this.bottomTips = '';
      }
    },
    addBtn(item) {
      return item.buttons && item.buttons.length && item.buttons.some(v => v.buttonCode === 1);
    },
    addFileRouter(item) {
      console.log(item);
      const { CENTERPRISECODE1, CPROGRAMNAME, ENTERPRISENAME } = this.$route.query;
      const { menuId, tableId, FILEID } = item;
      const param = {
        path: '/uploadFile',
        query: {
          CENTERPRISECODE1,
          CPROGRAMNAME,
          menuId,
          tableId,
          FILEID,
          ENTERPRISENAME
        }
      };
      this.$router.push(param);
    }
  }
};
</script>

<style lang="less" scoped>
.table_report{
  height: 100%;

  .u-loading{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
  }
  .u-table{
    table-layout:fixed;
    .u-td{
      height: auto;
      word-break: break-all;
      word-wrap:break-word;
    }
  }
  .add{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
    .addBtn {
      // width: 80px;
      height: 30px;
      margin-right: 20px;
    }
  }
}
</style>
